import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { useUserStore } from '../store/user'

// 页面组件 - 使用动态导入实现代码分割
const Home = () => import('../views/Home.vue')
const FundCenter = () => import('../views/FundCenter.vue')
const CardCategory = () => import('../views/CardCategory.vue')
const CardCenter = () => import('../views/CardCenter.vue')
const Mine = () => import('../views/Mine.vue')
const Login = () => import('../views/Login.vue')
const Register = () => import('../views/Register.vue')
const SafeBox = () => import('../views/SafeBox.vue')

// 路由配置
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/login',
        name: 'Login',
        component: Login,
        meta: {
            title: '登录',
            requiresAuth: false
        }
    },
    {
        path: '/register',
        name: 'Register',
        component: Register,
        meta: {
            title: '注册',
            requiresAuth: false
        }
    },
    {
        path: '/home',
        name: 'Home',
        component: Home,
        meta: {
            title: 'home',
            keepAlive: true,
            showTabBar: true,
            requiresAuth: false,
        }
    },
    {
        path: '/fund-center',
        name: 'FundCenter',
        component: FundCenter,
        meta: {
            title: 'fundCenter',
            keepAlive: true,
            showTabBar: true,
            requiresAuth: false
        }
    },
    {
        path: '/card-category',
        name: 'CardCategory',
        component: CardCategory,
        meta: {
            title: 'cardCategory',
            keepAlive: true,
            showTabBar: true,
            requiresAuth: false
        }
    },
    {
        path: '/card-center',
        name: 'CardCenter',
        component: CardCenter,
        meta: {
            title: 'cardCenter',
            keepAlive: true,
            showTabBar: true,
            requiresAuth: false,
        }
    },
    {
        path: '/safe-box',
        name: 'SafeBox',
        component: SafeBox,
        meta: {
            title: 'safeBox',
            keepAlive: true,
            showTabBar: true,
            requiresAuth: false
        }
    }, 
    {
        path: '/mine',
        name: 'Mine',
        component: Mine,
        meta: {
            title: '',
            keepAlive: true,
            showTabBar: true,
            requiresAuth: false
        }
    },    
    {
        path: '/card-category',
        name: 'CardCategory',
        component: CardCategory,
        meta: {
            title: 'cardCategory',
            keepAlive: true,
            showTabBar: false,
            requiresAuth: false
        }
    },
]

// 创建路由实例
const router = createRouter({
    history: createWebHistory(),
    routes
})

// 路由前置守卫
router.beforeEach((to, from, next) => {
    // 导入用户状态管理
    const userStore = useUserStore()

    // 判断该路由是否需要登录权限
    if (to.meta.requiresAuth === true) {
        // 如果需要登录权限，检查是否已登录
        if (userStore.isLoggedIn()) {
            next() // 已登录，放行
        } else {
            // 未登录，重定向到登录页
            next({
                path: '/login',
                query: { redirect: to.fullPath } // 将要访问的路径作为参数，登录成功后跳转到该路径
            })
        }
    } else {
        // 不需要登录权限的路由，直接放行
        next()
    }
})

export default router